<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>交易记录管理</title>
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/nprogress/nprogress.css">
    <link rel="stylesheet" href="../css/element-ui@2.13.0-theme-chalk-index.css">
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .el-table thead, .el-table {
            color: black;
            border: 1px solid #A0A0A0
        }

        .spanStyle {
            white-space: nowrap; /*强制span不换行*/
            display: inline-block; /*将span当做块级元素对待*/
            width: 180px; /*限制宽度*/
            overflow: hidden; /*超出宽度部分隐藏*/
            text-overflow: ellipsis; /*超出部分以点号代替*/
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 客户列表 -->
    <div class="body">
        <!-- 面包屑 -->
        <ol class="breadcrumb">
            <li><a href="javascript:;">交易记录管理</a></li>
            <li class="active">交易记录列表</li>
        </ol>
        <div class="panel panel-default user-list">
            <template>
                <el-table
                        :data="tradingRecord"
                        style="width: 100%"
                        border
                        :default-sort = "{prop: 'date', order: 'descending'}"
                >
                    <el-table-column
                            prop="tradeId"
                            label="交易编号"
                            sortable
                            width="250">
                        <template scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.tradeId" placement="top">
                                <span class="spanStyle">{{scope.row.tradeId}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="myName"
                            label="用户名称"
                            sortable
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="来源名称"
                            sortable
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="orderId"
                            label="订单编号"
                            sortable
                            width="220">
                        <template scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.orderId" placement="top">
                                <span class="spanStyle">{{scope.row.orderId}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="fees"
                            label="费用"
                            sortable
                            width="244">
                        <template scope="scope">
                            <span class="spanStyle" style="color: #E8AE3B ">{{scope.row.fees}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="交易时间"
                            sortable
                            width="250">
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-bottom: 30px">
        </el-pagination>
    </div>
</div>
<script src="../assets/jquery/jquery.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="../js/element-ui@2.13.0-index.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/nprogress/nprogress.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                tradingRecord:[],
                page: {
                    //当前页
                    current: 1,
                    //最大页数
                    total: '',
                    size: 10
                },
            }
        },
        methods:{
            getList() {
                let that = this
                let data = {
                    current: that.page.current,
                    size: that.page.size
                }
                getPostData(apiUrls.tradingRecord.selectAllTradingRecord,data,'post',function (data) {
                    if (data.msg === 'success') {
                        that.tradingRecord = data.data.records
                        that.page.total = data.data.total
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            handleSizeChange: function (size) {
                this.page.size = size;
                console.log(this.page.size)  //每页下拉显示数据
                this.getList()
            },
            handleCurrentChange: function (currentPage) {
                this.page.current = currentPage;
                console.log(this.page.current)  //点击第几页
                this.getList()
            },


        },
        mounted(){
            this.getList()
        }
    })
</script>
</body>
</html>